<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	// var g = context.createRadialGradient(200,200,50,200,200,400)/*(400,50,50,400,50,400)*/;//变完整的话改为(200,50,50,200,50,400),；把太阳移到中间改为(200,200,50,200,200,400)
	// g.addColorStop(0,"rgb(255,255,0)");
	// g.addColorStop(0.3,"rgb(255,0,255)");
	// g.addColorStop(1,"rgb(0,255,255)");
	// context.fillStyle = g;
	// context.fillRect(0,0,400,400)
	// 放大2倍：
	// context.strokeRect(10,10,55,25);
	// context.scale(1,2);//横坐标，纵坐标都放大倍数的地方(横坐标，纵坐标)
	// context.strokeStyle = "red";
	// context.strokeRect(10,10,55,25)
	// //旋转方框
	// context.rotate(Math.PI/8);
	// context.fillStyle = "green";
	// context.fillRect(300,100,200,150)
	// //
	// context.fillRect(10,10,200,150);
	// context.translate(190,10,)//可平移
	// context.fillStyle = "green";
	// context.fillRect(10,10,200,150)
	context.fillStyle="yellow";
	context.fillRect(0,0,250,100);
	context.transform(1,0.5,-0.5,1,30,50);
	context.fillStyle ="red";
	context.fillRect(0,0,250,100);
	context.transform(1,0.5,-0.5,1,30,50);
	context.fillStyle ="blue";
	context.fillRect(0,0,250,100);
</script>